

<template>
  <div style="min-height: 200px">
    <note>
      调整框大小以查看更改
    </note>
    <textarea ref="el" readonly class="resizer" :value="JSON.stringify(rect)" />
    <ul>
      <li v-for="item in arr" :key="item.ref" @click="go(item)">{{item.name}}</li>
    </ul>
    <div v-for="item in arr" :key="item.ref" :id="item.ref"
    class="block">{{item.name}}</div>
  </div>
</template>

<script>
import { useElementBounding } from '@vueuse/core'

export default {
  data() {
    return {
      rect: {},
      arr: [
        { name: 1, ref: 'a1' },
        { name: 2, ref: 'a2' },
        { name: 3, ref: 'a3' },
        { name: 4, ref: 'a4' },
      ]
    };
  },
  mounted() {
    this.rect = useElementBounding(this.$refs.el);
  },
  methods: {
    go({ ref }) {
      const { top } = useElementBounding(this.$el.querySelector(`#${ref}`));
      document.documentElement.scrollTop = top.value;
    },
  },
};
</script>

<style lang="scss" scoped>
li {
  cursor: pointer;
}
.block {
  min-height: 500px;
}
</style>